<template>
  <el-dialog
    :title="formTitle"
    :visible.sync="addDialogVisible"
    width="50%"
    :close-on-click-modal="false"
    @close="addDialogClosed"
  >
    <!-- 内容主题区 -->
    <el-form
      :model="addForm"
      :rules="addFormRules"
      ref="addFormRef"
      label-width="110px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="ip" prop="ip">
        <el-input v-model="addForm.ip"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="hostType">
        <el-select clearable v-model="addForm.type" placeholder="类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- <el-input v-model="addForm.hostType"></el-input> -->
      </el-form-item>
      <el-form-item label="所属机房" prop="belongRoom">
        
         <el-select clearable v-model="addForm.computerRoom.name" placeholder="请选择所属机房">
            <!-- <el-option-group
              v-for="group in roomCabinetList"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.children"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-option-group> -->
          </el-select>
      </el-form-item>
      <el-form-item label="业务系统" prop="systemId">
        <el-select clearable v-model="addForm.businessid"  placeholder="请选择">
          <el-option
            v-for="item in systemName"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- <el-input v-model="addForm.systemId"></el-input> -->
      </el-form-item>
      <el-form-item label="是否数据库" prop="isDatabase" style="width: 100%">
        <el-radio-group v-model="addForm.isDatabase">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>

        <!-- <el-input v-model="addForm.isDatabase"></el-input> -->
      </el-form-item>
      <el-form-item label="所属主机" prop="belongHost">
         <el-select clearable v-model="addForm.installid" placeholder="请选择安装的主机">
           
            <el-option-group
              v-for="group in hostList"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.children"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-option-group>
          </el-select>
        <!-- <el-input v-model="addForm.belongHost"></el-input> -->
      </el-form-item>
      <el-form-item label="子网" prop="subnet">
        <el-input v-model="addForm.subnet"></el-input>
      </el-form-item>
      <el-form-item label="网关" prop="gateway">
        <el-input v-model="addForm.gateway"></el-input>
      </el-form-item>
      <el-form-item label="DNS" prop="dns">
        <el-input v-model="addForm.dns"></el-input>
      </el-form-item>
      <el-form-item label="Mac地址" prop="mac">
        <el-input v-model="addForm.macAddress"></el-input>
      </el-form-item>

      <el-form-item label="负责人" prop="principal">
        <el-select clearable v-model="addForm.sysUser.nickName" filterable placeholder="请选择">
          <el-option
            v-for="item in principalQueName"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="公司部门" prop="company">
        <!-- <div class="block">
          <span class="demonstration"></span>
          <el-cascader
            v-model="addForm.company"
            :options="optionComName"
            :props="{ expandTrigger: 'hover' }"
          ></el-cascader>
        </div> -->
            <el-select clearable v-model="addForm.department.name" placeholder="请选择所属部门">
            <el-option-group
              v-for="group in companyDepartmentList"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.children"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-option-group>
          </el-select>
      </el-form-item>
    </el-form>
    <!-- 底部区 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { doEdit } from '@/api/assets/list/host'

export default {
  data() {
    return {
      value: [],

      principalQueName: [],
      options: [ ],

      systemName: [ ],
      optionsCabinet: [ ],
      optionComName: [
      ],
          // 主机列表
      hostList:[
      ],
      // 机房机柜列表
      roomCabinetList:[
      ],
         // 公司/部门列表
      companyDepartmentList:[
      ],
      formTitle: '修改主机',
      addDialogVisible: false,
      addForm: {
        belongCabinetRoom: '',
      },
      addFormRules: {},
    }
  },
  methods: {
    open(row) {
      console.log(row);
      this.addForm = Object.assign({}, row)

      this.addDialogVisible = true
    },
    save() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        if (this.addForm.id) {
          await doEdit(this.addForm)
        }
        this.addDialogVisible = false
        this.init()
      })
      this.addDialogClosed()
    },
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
      this.addDialogVisible = false
      this.$emit('init')
    },
  },
}
</script>
